<!DOCTYPE html>
<html>
  <head>
    <title>the-graph-thumb documentation</title>
    <meta charset="utf-8">

    <!-- Polymer deps -->
    <script src="../bower_components/platform/platform.js"></script>
    <link rel="import" href="../bower_components/polymer/polymer.html">

    <link rel="import" href="../the-graph-thumb/the-graph-thumb.html">

  </head>
  <body style="background-color:gray; color:white;">

    <the-graph-thumb id="thumb" width="400" height="300"></the-graph-thumb>

    <pre>
&lt;link rel="import" href="../the-graph-thumb/the-graph-thumb.html">

&lt;the-graph-thumb id="thumb" width="400" height="300">&lt;/the-graph-thumb>

&lt;script type="text/javascript">
  window.addEventListener('WebComponentsReady', function() {
    var thumb = document.getElementById('thumb');
    var thumb.graphjson = {...};
  });
&lt;/script>
    </pre>

    <script type="text/javascript">
    (function(){
      "use strict";

      window.addEventListener('WebComponentsReady', function() {

        window.loadGraph = function (json) {
          // Load graph
          var thumb = document.getElementsByTagName('the-graph-thumb')[0];
          thumb.graphjson = JSON.parse(json.data.files['noflo.json'].content);
        };
        var body = document.querySelector('body');
        var script = document.createElement('script');
        script.type = 'application/javascript';
        // Clock
        script.src = 'https://api.github.com/gists/7135158?callback=loadGraph';
        // Gesture object building (lots of ports!)
        //script.src = 'https://api.github.com/gists/7022120?callback=loadGraph';
        // Gesture data gathering (big graph)
        //script.src = 'https://api.github.com/gists/7022262?callback=loadGraph';
        // Edge algo test
        // script.src = 'https://api.github.com/gists/6890344?callback=loadGraph';
        body.appendChild(script);
      });

    })();
    </script>
  </body>
</html>
